<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>显示文章内容的标签</title>
    <!-- 设置表格边框的 CSS 代码，大家直接整体复制粘贴即可 -->
    <style>
        /* 设置表格边框 */
        table, th, td {
            border: 1px solid black;
        }

        table {
            border-collapse: collapse;
        }
    </style>
</head>
<body>

    <!-- 标题标签 -->
    <h1>一级标题</h1>
    <h2>二级标题</h2>
    <h3>三级标题</h3>
    <h4>四级标题</h4>
    <h5>五级标题</h5>
    <h6>六级标题</h6>

    <!-- 段落标签 -->
    <!-- 一个 p 标签定义一个段落，每个段落自己独占一行 -->
    <p>春风十里不如你~</p>
    <p>春风十里不如你~</p>
    <p>春风十里不如你~</p>
    <!-- 不使用 p 标签，内容默认是横向不换行排列的 -->
    春风十里不如你~
    春风十里不如你~
    春风十里不如你~

    <!-- 换行标签 -->
    <p>东风不与周郎便，铜雀春深锁二乔。</p>
    <p>东风不与周郎便，<br/>铜雀春深锁二乔。</p>

    <!-- 列表标签 -->
    <!-- 有序列表：Order List -->
    <ol>
        <!-- list item 列表项 -->
        <li>第一项</li>
        <li>第二项</li>
        <li>第三项</li>
    </ol>

    <!-- 无序列表（常用）：unOrder List -->
    <ul>
        <!-- list item 列表项 -->
        <li>第一项</li>
        <li>第二项</li>
        <li>第三项</li>
    </ul>

    <!--
     =======================路径=======================
     物理路径：
        使用建议：绝对不用，因为项目在服务器上运行，路径不可能和开发人员本地电脑上路径一致，所以说物理路径不具备跨平台性、不具备可迁移性
        举例：D:\space-code\atguigu-project-240704\module01-HTML\page03-article.html
     相对路径：以当前资源自身为参照依据，查找其它资源（现阶段在 HTML 中可以使用相对路径）
        page02-grammar.html（相当于省略了./，在当前目录下查找资源）
        ./page01-helloWorld.html（./代表当前目录，./可以省略）
        ../module01-HTML/page01-helloWorld.html（../代表上一级目录）
     绝对路径：路径开头是以斜杠开头的（实际开发中建议使用绝对路径）
        /space-code/atguigu-project-240704/module01-HTML/page03-article.html
     =================================================
     -->
    <!-- 超链接标签：a 标签（a 是 anchor 单词的首字母） -->
    <!-- href 属性：指定点击超链接之后要跳转的目标页面，这里具体要写的就是路径 -->
    <a href="./pages/target.html">点我跳转到目标页面（用到了./）</a><br/>
    <a href="pages/target.html">点我跳转到目标页面（省略了./）</a><br/>
    <a href="../module01-HTML/pages/target.html">点我跳转到目标页面（用到了../）</a><br/>

    <!-- 超链接在新窗口打开目标页面：把 target 属性设置为 _blank 即可 -->
    <a href="pages/target.html" target="_blank">点我跳转到目标页面（在新窗口打开）</a>

    <!-- 图片标签 -->
    <!-- 标签名：img -->
    <!-- 指定图片的路径：src 属性 -->
    <img src="images/wanghaodong.jpg" title="我爱你栋哥！" alt="想念栋哥！"/>

    <br/><br/><br/>

    <!-- 表格 -->
    <!-- table 标签：定义表格整体 -->
    <!-- tr 标签：定义表格中的一行 -->
    <table>
        <tr>
            <!-- th 标签：定义表格的表头（表格的第一行），每一个 th 标签对应一个单元格 -->
            <!-- th 和 td 的区别：th 标签对内部文字有加粗效果 -->
            <th>姓名</th>
            <th>性别</th>
            <th>年龄</th>
        </tr>
        <tr>
            <!-- td 标签：定义普通单元格 -->
            <td>张三</td>
            <td>男</td>
            <td>18</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>女</td>
            <td>20</td>
        </tr>
        <tr>
            <td>王五</td>
            <td>男</td>
            <td>22</td>
        </tr>
    </table>

    <br><br><br><br><br><br><br><br><br><br><br><br>

    <!-- 表格中合并单元格的操作 -->
    <table>
        <tr>
            <!-- th 标签：定义表格的表头（表格的第一行），每一个 th 标签对应一个单元格 -->
            <!-- th 和 td 的区别：th 标签对内部文字有加粗效果 -->
            <th>姓名</th>
            <th>性别</th>
            <th>年龄</th>
        </tr>
        <tr>
            <!-- td 标签：定义普通单元格 -->
            <td>张三</td>
            <!-- 通过 colspan 属性设置跨列合并单元格 -->
            <td colspan="2">男</td>
            <!--<td>18</td>-->
        </tr>
        <tr>
            <td>李四</td>
            <td>女</td>
            <!-- 通过 rowspan 属性设置跨行合并单元格 -->
            <td rowspan="2">20</td>
        </tr>
        <tr>
            <td>王五</td>
            <td>男</td>
            <!--<td>22</td>-->
        </tr>
    </table>

    <br><br><br><br><br><br><br><br><br><br><br><br>
    <!-- div 标签：代表 CSS 布局时使用的“块”，div 定义的块在显示时独占一行 -->
    <div>div01</div>
    <div>div02</div>
    <div>div03</div>

    <!-- span 标签：代表 CSS 布局时使用的“块”，span 定义的块不会独占一行，多个 span 在同一行内横向排列 -->
    <span>span01</span>
    <span>span02</span>
    <span>span03</span>

    <br><br><br><br><br><br><br><br><br><br><br><br>
    <!-- HTML 中定义了一些特殊字符，这种写法也叫 HTML 实体 -->
    <!-- 其实就是 Java 中转义字符的思想 -->
    <p>常用特殊符号：空&nbsp;&nbsp;&nbsp;格</p>
    <p>常用特殊符号：空                               格(浏览器实际显示时只显示一个空格)</p>
    <p>常用特殊符号：大于号&gt; greater than</p>
    <p>常用特殊符号：小于号&lt; less than</p>

    <br><br><br><br><br><br><br><br><br><br><br><br>
</body>
</html>